<template>
    <uxt-picker
        :name="name"
        :options="options"
        :labelField="labelField"
        :disabled="disabled"
        v-model="value1"
        @change="handleChange"
        @cancel="handleCancel"
    >
        <uxt-bar
            :classes="classes"
            :styles="styles"
            :color="color"
            :bg-color="bgColor"
            :icon="icon"
            :title="title"
            :content="content2"
            :desc="desc"
            :arrow="arrow"
            :box="box"
            :round="round"
            :radius="radius"
            :focus="focus"
            @click="handleClick"
        >
            <template slot="left">
                <text class="text-red" v-if="star">*</text>
                <slot name="left"></slot>
            </template>
            <template slot="right">
                <slot name="right"></slot>
            </template>
        </uxt-bar>
    </uxt-picker>
</template>

<script>
import baseMixin from '../mixins/base.js'
import barMixin from '../mixins/bar.js'
import rrMixin from '../mixins/rr.js'
import uxtPicker from './uxt-picker.vue'
import uxtBar from './uxt-bar.vue'
import { deepCopy } from '../utils/util.js'

export default {
    name: 'uxt-picker-bar',
    mixins: [baseMixin, barMixin, rrMixin],
    components: {
        uxtPicker,
        uxtBar
    },
    props: {
        name: {
            type: String
        },
        value: {
            type: [Number, Array]
        },
        // 红星
        star: {
            type: Boolean,
            default: false
        },
        // Array<String> | Array<Object>
        options: {
            type: Array,
            default() {
                return []
            }
        },
        // options为Array<Object>，指定label字段
        labelField: {
            type: String,
            default: ''
        },
        // 多选时的分隔符
        split: {
            type: String,
            default: ','
        },
        disabled: {
            type: Boolean,
            default: false
        },
        bgColor: {
            default: 'white'
        },
        content: {
            default: '请选择'
        },
        arrow: {
            default: true
        }
    },
    data() {
        return {
            focus: false,
            value1: this.value !== undefined ? this.value : Array.isArray(this.options[0]) ? [] : -1
        }
    },
    computed: {
        content2() {
            if (Array.isArray(this.options[0])) {
                if (!Array.isArray(this.value1) || this.value1.length === 0) {
                    return this.content
                }
                let options = this.options
                if (Array.isArray(this.options[1]) && Array.isArray(this.options[1][0])) {
                    // 联动
                    options = this.getOptions(this.value1)
                }
                // 多选
                return this.value1
                    .map((item, index) =>
                        typeof options[0][0] === 'object'
                            ? options[index][item][this.labelField]
                            : options[index][item]
                    )
                    .join(this.split)
            }
            // 单选
            if (
                !Number.isInteger(this.value1) ||
                this.value1 < 0 ||
                this.value1 >= this.options.length
            ) {
                return this.content
            }
            if (typeof this.options[0] === 'object') {
                return this.options[this.value1][this.labelField]
            } else {
                return this.options[this.value1]
            }
        }
    },
    watch: {
        options(newVal, oldVal) {
            if (Array.isArray(this.options[0])) {
                this.value1 = []
                this.value11 = []
            } else {
                this.value1 = -1
                this.value11 = -1
            }
        },
        value(newVal, oldVal) {
            this.value1 = this.value
        }
    },
    methods: {
        // 联动时动态获取options
        getOptions(value) {
            let options = [deepCopy(this.options[0])]
            for (let i = 1; i < value.length; i++) {
                let x = this.options[i]
                for (let j = i; j > 0; j--) {
                    x = x[value[i - j]]
                }
                options.push(deepCopy(x))
            }
            return options
        },
        handleChange(e) {
            this.$emit('change', e)
            this.$emit('input', e.detail.value)
            this.focus = false
        },
        handleCancel(e) {
            this.$emit('cancel', e)
            this.focus = false
        },
        handleClick(e) {
            if (this.disabled) {
                return
            }
            this.focus = true
            let v = this.value1
            this.value1 = Array.isArray(this.options[0]) ? [] : -1
            setTimeout(() => {
                this.value1 = v
            }, 0)
        }
    }
}
</script>
